<template>
  <div class="common-layout__danmakuI">
    <div class="header">
      <div>
        <el-button @click="deleteBatch(multipleSelection)">删除弹幕</el-button>
        <el-button @click="getDanmaku" :icon="Refresh">刷新</el-button>
      </div>
      <div>
        <el-select
          v-model="selectedVideoId"
          class="video-select"
          @change="changeVideo"
        >
          <el-option
            v-for="item in videoOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
            >{{ item.title }}</el-option
          >
        </el-select>
      </div>
    </div>
    <el-table
      :data="danmakuTableData.records"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="发送者" width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ userName(scope.row.user.name, scope.row.user.id) }}
        </template>
      </el-table-column>

      <el-table-column
        property="video.title"
        label="视频标题"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column label="播放时间" width="120">
        <template #default="scope">
          {{ timeConversion(scope.row.time) }}
        </template>
      </el-table-column>
      <el-table-column
        property="content"
        label="弹幕内容"
        show-overflow-tooltip
      />
      <el-table-column
        property="createTime"
        label="发送时间"
        show-overflow-tooltip
      />
      <el-table-column label="删除">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="deleteBatch([scope.row])"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="page.pageIndex"
        @current-change="getDanmaku"
        :page-size="page.pageSize"
        background
        layout="prev, pager, next"
        :total="danmakuTableData.total"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, onUnmounted } from "vue";
import videoApi from "@/api/video";
import { Video } from "@/types/video";
import { Danmaku, PageParams } from "@/types/danmaku";
import { PageResp } from "@/types/page";
import danmakuApi from "@/api/danmakuApi";
import { timeConversion, userName } from "@/utils/common";
import { successNotify } from "@/utils/common";

const selectedVideoId = ref("0");
const videoOptions = ref(<Video[]>[]);
const danmakuTableData = ref(<PageResp<Danmaku>>{});
const multipleSelection = ref(<Danmaku[]>[]);
const page = ref<PageParams>({
  pageIndex: 1,
  pageSize: 20,
  createTimeIsAsc: true,
});

const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const deleteBatch = (danmakus: Danmaku[]) => {
  if (danmakus.length === 0) return;
  ElMessageBox.confirm("确认删除所选弹幕吗？")
    .then(async () => {
      console.log(danmakus);

      let ids = danmakus.map((v) => v.id);
      const { code, data } = await danmakuApi.remove(ids);
      if (code === 0) {
        successNotify(data);
        getDanmaku();
      }
    })
    .catch(() => {});
};

const changeVideo = () => {
  page.value.pageIndex = 1;
  getDanmaku();
};

const formatter = (row: any, column: any, cellValue: any, index: any) => {
  return timeConversion(row.time);
};

// 获取自己的视频标题
const getVideosTitle = async () => {
  const { code, data } = await videoApi.getIdTitle();
  if (code === 0) {
    videoOptions.value.push(...data);
  }
};

const getDanmaku = async () => {
  if (selectedVideoId.value === "0") {
    delete page.value.videoId;
  } else {
    page.value.videoId = selectedVideoId.value;
  }
  const { code, data } = await danmakuApi.page(page.value);
  if (code === 0) {
    danmakuTableData.value = data;
  }
};

onMounted(() => {
  videoOptions.value.push(<Video>{ id: "0", title: "最近弹幕" });
  getVideosTitle();
  getDanmaku();
});
</script>

<style lang="scss" scoped>
.common-layout__danmakuI {
  & > .header {
    display: flex;
    justify-content: space-between;
  }

  & > .pagination {
    margin-top: 20px;
  }
}
</style>
